<script setup lang="ts">
import { ref } from 'vue';
import { useRouterPush } from '@/composables';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import { showToast, showLoading, hideLoading } from '@tarojs/taro';
import { useNurseUser } from '@/service';
import { useGetAuthInfo } from '@/hooks';
import { SUCCESS_MSG_DURATION } from '@/constants';

const { edit } = useNurseUser();

const { nurseUser } = storeToRefs(useAuthStore());

definePageConfig({
    navigationBarTitleText: '被监护人'
});

const { toGuardian } = useRouterPush();

const visible_delete = ref(false);

const editIndex = ref(0);

function clickDelete(index: number) {
    visible_delete.value = true;
    editIndex.value = index;
}

async function onDelete() {
    nurseUser.value.nurseUserFamilyList[editIndex.value].status = '0';
    const data = { id: nurseUser.value.id, nurseUserFamilyList: [...nurseUser.value.nurseUserFamilyList] };
    showLoading({ title: '正在删除...' });
    const { error } = await edit(data);
    hideLoading();
    if (!error) {
        showToast({
            title: '删除成功',
            icon: 'success',
            duration: SUCCESS_MSG_DURATION
        });
        useGetAuthInfo();
    }
}
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="被监护人" showLeft /> -->
        <nut-empty v-if="!nurseUser.nurseUserFamilyList || nurseUser.nurseUserFamilyList.length == 0"
            description="暂无被监护人"></nut-empty>
        <view class="w-375px text-primary flex-col-center">
            <view v-for="(item, index) in nurseUser.nurseUserFamilyList" class="w-360px flex-col-center">
                <view class="bg-#fff b-rounded-3 w-full shadow flex h-75px m-t-2 flex-col justify-around items-start">
                    <view class="flex-center w-full h-full" @click="toGuardian(item.id)">
                        <view class="w-3/4 h-full flex justify-start items-center">
                            <view class="ml-2 w-2/6">
                                <view class="font-bold text-lg">{{ item.name }}</view>
                            </view>
                            <view class="ml-2 flex justify-between items-center w-4/6">
                                <view class="w-1/3 whitespace-nowrap flex-col-center">
                                    <view>关系</view>
                                    <view class="text-amber h-20px font-bold text-sm">{{ item.relationName }}</view>
                                </view>
                                <view class="w-1/3 whitespace-nowrap flex-col-center">
                                    <view>性别</view>
                                    <view class="text-amber h-20px font-bold text-sm">{{ item.sex == '1' ? '男' : '女' }}
                                    </view>
                                </view>
                                <view class="w-1/3 whitespace-nowrap flex-col-center">
                                    <view>年龄</view>
                                    <view class="text-amber h-20px font-bold text-sm">
                                        {{ item.age ? `${item.age}${item.ageUnit}` : '' }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="w-1/4 h-full flex-center">
                            <nut-button type="danger" @click.stop="clickDelete(index)">删除</nut-button>
                        </view>
                    </view>
                </view>
            </view>
            <basic-button text="新增被监护人" class="m-y-2" @onClick="toGuardian" />
        </view>
        <nut-dialog v-model:visible="visible_delete" title="提示" content="是否删除被监护人？" @cancel="visible_delete = false"
            @ok="onDelete" />
    </basic-layout>
</template>
